<template>

    <div>
        <p>姓名:{{otherperson.name}}</p>
        <p>年龄:{{otherperson.age}}</p>
        <button type="button" @click="otherperson.name+='```'">修改姓名</button>
        <button type="button" @click="otherperson.age++">修改年龄</button>
      </div>
    </template>
    
    <script setup>
    let nameVal=ref('john');
    let ageVal=ref(100);
    let otherperson=ref(
      {
       name:nameVal,
       age:ageVal}
       );
    
    /* //生命周期 */
    onBeforeMount(() => {
      console.log('beforeMount');
    });
    
    onMounted(() => {
      console.log('mounted');
    });
    
     
    </script>
    
    <style lang="less" scoped>
    body {
        width: 100px;
        height: 100px;
        background: #fff;
    }
    </style>
    